<template>
	<view class="home">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="tabs">
			<u-tabs
				:list="tabList"
				lineWidth="30"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="height: 45px;width:44%;"
				:current="active"
				@click="onClick"
			></u-tabs>
		</view>
		<block v-if="list.length > 0">
			<view class="list">
				<view class="list_meun" v-for="(item, index) in list" :key="index">
					<view class="list_meun_left">
						<view class="list_meun_bg">评选</view>
						<view class="list_meun_name">{{item.index_name}}</view>
					</view>
					<view class="list_btn">
						已关注
						<image src="../../static/images/dui.png" mode="" class="list_img"></image>
					</view>
				</view>
			</view>
		</block>
		<view class="empty" v-else>
			<image src="../../static/images/bg03.png" mode="aspectFit"></image>
			<text>暂未{{ active == 0 ? '关注任何人' : '拥有粉丝' }}</text>
		</view>
	</view>
</template>

<script>
import { userGatherListAPI } from '@/api/user'
export default {
	data() {
		return {
			title: '',
			active: 0,
			bgColor: '#fff',
			list: [{}],
			tabList: [
				{
					name: '关注'
				},
				{
					name: '粉丝'
				}
			]
		};
	},
	mounted() {
		
	},
	onLoad(options) {
		this.active = options.type;
		this.getData(options.type)
	},
	methods: {
		onClick(item) {
			this.active = item.index;
			this.getData(item.index)
		},
		getData(data){
			if(data == 0){
				var parems = {
					token:uni.getStorageSync('accessToken'),
					type:5,
					status:1,
					project_id:''
				}
				userGatherListAPI(parems).then(res => {
					if(res.code == 1){
						this.list = res.data
					}else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}else if(data == 1){
				var parems = {
					token:uni.getStorageSync('accessToken'),
					type:5,
					status:2,
					project_id:''
				}
				userGatherListAPI(parems).then(res => {
					if(res.code == 1){
						this.list = res.data
					}else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		},
		detail() {
			uni.navigateTo({
				url: './typeDetail'
			});
		}
	}
};
</script>

<style>
/* page {
	background: #f6f6f6 !important;
} */
</style>
<style lang="scss" scoped>
.tabs {
	margin-top: 128rpx;
	background: #fff;
	border-bottom: 2rpx solid #eee;
	padding-bottom: 10rpx;
}
.list {
	padding: 0 30rpx;
}
.list_meun {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #eee;
	height: 120rpx;
}
.list_meun_left {
	display: flex;
	align-items: center;
}
.list_meun_bg {
	background: #3c9cff;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #ffffff;
}
.list_meun_name {
	font-size: 32rpx;
	color: #303133;
	letter-spacing: 1rpx;
	margin-left: 10rpx;
}
.list_btn {
	display: flex;
	align-items: center;
	background: #f6f6f6;
	font-size: 28rpx;
	width: 165rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100rpx;
}
.list_img {
	width: 35rpx;
	height: 35rpx;
	margin-left: 15rpx;
}
.empty {
	width: 100%;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image {
		width: 100%;
		height: 200rpx;
	}
	text {
		font-size: 26rpx;
		color: #808080;
		margin-top: 15rpx;
		letter-spacing: 2rpx;
	}
}
</style>
